<!DOCTYPE html>
<html lang="en" style="width: 100%;height: 100%;margin: 0;padding: 0;">
<head>
    <meta charset="UTF-8">
    <title>one-px</title>
    <script src="vue.js"></script>
</head>
<body style="width: 100%;height: 100%;margin: 0;padding: 0;">
<div id="app" style="width: 100%;height: 100%;margin: 0;padding: 0;">
    <div style="display: flex;flex-direction: row;">
        <div>缩放：</div>
        <button @click="imageZoomOut">-</button>
        <div style="width: 100px;text-align: center;border: solid 1px dimgrey;">{{imageScale}}</div>
        <button @click="imageZoomIn">+</button>
        <div>旋转</div>
        <input v-module="angle">
    </div>
    <div style="overflow: auto;max-width: 100%;max-height: 50%;border: 1px solid black;">
        <img id="img" src="img.png" width="10000" height="5621" alt="img">
    </div>
    <div style="display: flex;flex-direction: row;">
        <div>canvas</div>
        <button @click="drawImage">redraw image</button>
    </div>
    <div>
        <canvas id="canvas" width="500" height="500"></canvas>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                imageScale: .1,
                angle:0,
            }
        },
        mounted () {
            this._zoomImage();

        },
        methods: {
            _zoomImage () {
                this.imageScale = parseFloat(this.imageScale.toFixed(1))
                const img = document.getElementById('img')
                if (img) {
                    const mul = this.imageScale;
                    img.setAttribute('width', 10000 * mul);
                    img.setAttribute('height', 5621 * mul)
                }
            },
            imageZoomIn () {
                this.imageScale += .1;
                this._zoomImage();
            },
            imageZoomOut () {
                this.imageScale -= .1;
                if (this.imageScale <= 0.1) {
                    this.imageScale = .1;
                }
                this._zoomImage();
            },
            drawImage () {
                let img = document.getElementById('img')
                let canvas = document.getElementById('canvas');
                let context = canvas.getContext('2d');
                context.drawImage(img, 0, 0, 500, 500);

            }
        }
    })


</script>
</body>
</html>
